<!--
 * @Author: 邵渊
 * @LastEditors: 邵渊
 * @Description: LcTextarea 文本域
-->
<template>
  <div class="lc-textarea-container">
    <el-input
      v-model="textareaValue"
      v-bind="configs"
      class="container-textarea"
      type="textarea"
      :suffix-icon="Check"
    >
    </el-input>
    <el-icon v-show="clearable" class="container-icon" @click="handleClear()">
      <CircleCloseFilled />
    </el-icon>
  </div>
</template>
<script setup>
import { nextTick, onMounted } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";

defineProps({
  configs: {
    type: Object,
    default: () => {},
  },
  // 是否支持清空
  clearable: {
    type: Boolean,
    default: false,
  },
});
const textareaValue = defineModel();
onMounted(() => {
  nextTick(() => {
    const textareaDoms = document.getElementsByClassName("el-textarea__inner");
    for (let i = 0; i < textareaDoms.length; i++) {
      const dom = textareaDoms[i];
      dom.removeAttribute("maxlength");
    }
  });
});
const handleClear = () => {
  textareaValue.value = "";
};
</script>
<style scoped>
.lc-textarea-container {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  .container-icon {
    position: absolute;
    right: 6px;
    color: #999;
    cursor: pointer;
    margin-left: 4px;
    opacity: 0.01;
  }
}
.lc-textarea-container:hover {
  .container-icon {
    position: absolute;
    right: 6px;
    color: #999;
    cursor: pointer;
    margin-left: 4px;
    opacity: 1;
  }
}
</style>
